<template>
  <div class="environment-company">
    <div class="environment-header">
      <p class="title left ">
        <span @click="back" class="color">环境监测</span>
        <span> > </span>
        <span>{{$route.query.areaName}}</span>
      </p>
      <div class="right">
        <span class="ml10 mr5">项目 </span>
        <zz-search @searchClick="searchClick"></zz-search>
      </div>
    </div>

    <div class="content-header">
      <p class="left">
        <span>今日扬尘达标率</span>
        <b class="color">{{dustPassRate}}</b>
        <span>噪音达标率</span>
        <b class="color">{{noisePassRate}}</b>
      </p>

      <div class="right">
        <button class="button-block mr20 " @click="notMonitorList">无监测的项目({{noneMonitorDeviceProjectNum}})</button>
        <zz-check
                  :check = false
                  class="grid"
                  fontSize="12px"
                  @handleChange="handleChange"
                  style="vertical-align: text-top;"
                  checkTip="仅查看超标的项目">
        </zz-check>
        <span class="ml10 mr5">排序</span>
        <zz-select
                   class="inline mr10"
                   :border= true
                   :options="{width: '170px'}"
                   :option="sortList3"
                   name = '按报警次数降序'
                   @optionClick="changeSort3"></zz-select>
      </div>
    </div>
    <zz-table
      :title="title"
      :dataList = 'dataList'
      @handle="tableHandler">
    </zz-table>
    <zz-paginate :simple="false" :isTotalItem="false" v-if="dataList.length > 0" @choose="searchByProject" :padding="[0]" class="right"></zz-paginate>
    <div class="exportExcel ml20" style="line-height: 30px">
      <button class="mr10 button-block" @click="exportExcel()">导出Excel</button>
      <span>上述每小时统计一次，本次数据更新时间{{updateTime}}</span>
    </div>
    <!-- 无监测的项目弹窗 -->
    <zz-dialog
      :title = dialogTitle
      :visible = showDialog
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close">
      <div class="dialog-box">
        <div style="width: 800px;">
          <div style="height: 380px" v-bar>
            <div>
              <zz-table
                style="margin: 0 -20px 0"
                :title="dialogTableTitle"
                :dataList = "detailDataList">
              </zz-table>
            </div>
          </div>
          <div class="exportExcel clear" style="padding-top: 20px">
            <button class="mr10 button-block left" v-if="detailDataList.length > 0" @click="exportNoMonitorExcel()">导出Excel</button>
            <zz-paginate :simple="false" pagingId="noMonitorList" :isTotalItem="false" v-if="detailDataList.length > 0" @choose="getNoMonitorList" :padding="[0]" class="right"></zz-paginate>
          </div>
        </div>
      </div>
    </zz-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getEnvRegionInfo, getEnvInfoByProject, getNoneEnvMonitorDeviceProject } from '@/service/api.js'

  export default {
    name: 'company',
    data () {
      return {
        sortList3: {
          1: '按报警次数降序',
          2: '按报警次数升序'
        },
        title: [
          {name: '区域名称', width: '10%', align: 'center'},
          {name: '项目名称', width: '17%', align: 'center'},
          {name: '今日报警次数', width: '13%', align: 'center'},
          {name: 'PM2.5', width: '9%', align: 'center'},
          {name: 'PM10', width: '9%', align: 'center'},
          {name: 'TSP', width: '9%', align: 'center'},
          {name: '噪音', width: '9%', align: 'center'},
          {name: '温湿度', width: '9%', align: 'center'},
          {name: '风速', width: '9%', align: 'center'},
          {name: '操作', width: '7%', align: 'center'},
        ],
        dataList: [],
        showDialog: false,
        dustPassRate: '',
        updateTime: '',
        searchName: '',
        projectId: '',
        noneMonitorDeviceProjectNum: '',
        overproofProject: '',
        areaCode: '',
        orderRule: 1,
        orderProjectRule: 1,
        orderByClause: 'a.envir_monitor_projectcount',
        noisePassRate: '',
        dialogTitle: '无环境监测的项目(共0个项目)',
        dialogTableTitle: [
          {name: '序号', width: '11%', align: 'center'},
          {name: '项目名称', width: '20%', align: 'center'},
          {name: '区域', width: '15%', align: 'center'},
          {name: '项目负责人', width: '22%', align: 'center'},
          {name: '上线智慧工地时间', width: '22%', align: 'center'}
        ],
        detailDataList: []
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    mounted () {
      this.searchByProject()
    },
    methods: {
      back () {
        this.$router.push({name: 'companyEnvironment'})
      },
      searchClick (val) {
        this.searchName = val
        this.searchByProject()
      },
      // 按项目查找
      searchByProject () {
        let data = this.getInfoByProjectQuery()
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/environmentMonitor/getInfoByProject`,
          data: this.$qs.stringify(data, {indices: false}),
          paginate: true
        }).then(res => {
          this.dustPassRate = res.data.data.dustPassRate
          this.noisePassRate = res.data.data.noisePassRate
          this.noneMonitorDeviceProjectNum = res.data.data.noneMonitorDeviceProjectNum
          if (res.data.data.pageList && res.data.data.pageList.dataList.length > 0) {
            this.updateTime = this.$moment(res.data.data.pageList.dataList[0].updateTime).format('HH:mm:ss')
            this.dataList = res.data.data.pageList.dataList.map(item => {
              return {
                departmentName: item.areaName,
                zhgdProjectcount: item.projectName,
                alarmNum: item.alarmNum,
                pmTwoPointFiveStatus: {customize: `<span style="color: ${this.getColor(item.pmTwoPointFiveStatus)}">${item.pmTwoPointFiveStatus}</span>`},
                pmTenStatus: {customize: `<span style="color: ${this.getColor(item.pmTenStatus)}">${item.pmTenStatus}</span>`},
                tspStatus: {customize: `<span style="color: ${this.getColor(item.tspStatus)}">${item.tspStatus}</span>`},
                noiseStatus: {customize: `<span style="color: ${this.getColor(item.noiseStatus)}">${item.noiseStatus}</span>`},
                tempHumidityStatus: {customize: `<span style="color: ${this.getColor(item.tempHumidityStatus)}">${item.tempHumidityStatus}</span>`},
                windspeedStatus: {customize: `<span style="color: ${this.getColor(item.windspeedStatus)}">${item.windspeedStatus}</span>`},
                handle: [{name: '查看详情', type: 'detail', data: item}]
              }
            })
          } else {
            this.dataList = []
          }
        })
      },
      getColor (status) {
        let color = ''
        switch (status) {
          case '正常':
            color = '#28ac7b'
            break
          case '无检测':
            break
          case '超标':
            color = '#fe3432'
            break
        }
        return color
      },
      getInfoByProjectQuery () {
        return {
          areaCode: this.$route.query.areaCode, // 区域编码
          projectName: this.searchName, // 项目名称
          overproofProject: this.overproofProject, // 仅查看超标的项目为1
          orderRule: this.orderProjectRule // 1降序 2升序
        }
      },
      // 查看详情
      tableHandler (option) {
        let {projectName, projectId} = option.data
        this.$router.push({name: 'projectEnvironment', query: {projectId: projectId, projectName: projectName}})
      },
      // 是否只查看超标的项目
      handleChange (item) {
        item ? this.overproofProject = 1 : this.overproofProject = ''
        this.searchByProject()
      },
      // 按项目查找切换排序方式2
      changeSort3 (item) {
        this.orderProjectRule = item.key
        this.searchByProject()
      },
      // 无监测项目
      notMonitorList () {
        this.showDialog = true
        this.$nextTick(() => {
          this.getNoMonitorList()
        })
      },
      // 无监测列表
      getNoMonitorList () {
        let data = this.getNoMonitorListQuery()
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/environmentMonitor/getNoneMonitorDeviceProject`,
          data: this.$qs.stringify(data, {indices: false}),
          pagingId: 'noMonitorList',
          paginate: true
        }).then(res => {
          let {startRow} = res.data.data
          this.detailDataList = res.data.data.dataList.map((item, index) => {
            let gmtCreate = ''
            if (item.gmtCreate) {
              gmtCreate = this.$moment(item.longGmtCreate).format('YYYY-MM-DD')
            }
            return {
              index: startRow + index + 1,
              projectTitle: item.projectTitle || '--',
              departmentName: item.departmentName || '--',
              memberName: item.memberName || '--',
              videoNum: `${gmtCreate}   已${item.onlineDay}天`
            }
          })
          this.dialogTitle = `无环境监测的项目(共${res.data.data.total}个项目)`
        })
      },
      getNoMonitorListQuery () {
        return {
          mId: this.currentUser.mid,// 登录人id
          coId: this.currentUser.coId, // 企业id
          areaCode: this.$route.query.areaCode // 区域编码
        }
      },
      close () {
        this.showDialog = false
      },
      exportExcel () {
        this.$export(`${this.$site.videoServer}/api/environmentMonitor/getInfoByProjectExcel`, this.getInfoByProjectQuery())
      },
      exportNoMonitorExcel () {
        this.$export(`${this.$site.videoServer}/api/environmentMonitor/getNoneMonitorDeviceProjectExcel`, this.getNoMonitorListQuery())
      }
    }
  }
</script>

<style scoped lang='scss'>
  .environment-company{
    .environment-header{
      height: 60px;
      line-height: 30px;
      padding: 15px 20px 17px 20px;
      box-sizing: border-box;
      border-bottom: 1px $color-line solid;
    }
    .content-header{
      height: 60px;
      padding: 20px 20px 10px 20px;
      line-height: 30px;
      box-sizing: border-box;
    }
    .content-bottom{
      padding: 0 20px;
      height: 30px;
      line-height: 30px;
    }
  }
</style>
